<template>
  <div class="app-container">
    <div v-if="!open" class="app-container flex1 flex-col over-hidden">
      <el-form
        class="flex-shrink-0"
        :model="queryParams"
        ref="queryForm"
        size="small"
        :inline="true"
        v-show="showSearch"
      >
        <el-form-item label="供应商名称" prop="supplierName">
          <el-input
            v-model="queryParams.supplierName"
            placeholder="请输入供应商名称"
            clearable
            style="width: 240px"
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item label="单据日期" prop="documentDate">
          <el-date-picker
            v-model="queryParams.documentDate"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="状态" prop="state">
          <el-select
            v-model="queryParams.state"
            placeholder="请选择状态"
            clearable
            style="width: 240px"
          >
            <el-option
              v-for="status in statusList"
              :key="status.dictValue"
              :label="status.dictLabel"
              :value="status.dictValue"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            icon="el-icon-search"
            size="mini"
            @click="handleQuery"
            >搜索</el-button
          >
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
            >重置</el-button
          >
        </el-form-item>
      </el-form>

      <el-row :gutter="10" class="flex-shrink-0 mb8">
        <el-col :span="1.5">
          <el-button
            type="primary"
            plain
            size="mini"
            @click="handleExport"
            v-hasPermi="['system:role:add']"
            >导出</el-button
          >
        </el-col>
        <right-toolbar
          :showSearch.sync="showSearch"
          @queryTable="getList"
        ></right-toolbar>
      </el-row>
      <div class="flex1 over-hidden">
        <el-table
          v-loading="loading"
          :data="supplierList"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="55" align="center" />
          <el-table-column label="出账日期" prop="statementDate" />
          <el-table-column label="对账单编号" prop="number" />
          <el-table-column label="供应商名称" prop="supplierName" />
          <el-table-column label="账单周期" prop="billingCycle" />
          <el-table-column label="账单金额（元）" prop="billAmount" />
          <el-table-column label="状态" align="center">
            <template slot-scope="scope">
              <span> {{ scope.row.state | dictFilter(statusList) }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="操作"
            align="center"
            class-name="small-padding fixed-width"
          >
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="text"
                @click="handleSure(scope.row)"
                v-hasPermi="['system:role:remove']"
                v-if="scope.row.state !== '3'"
                >确认</el-button
              >
              <el-button
                size="mini"
                type="text"
                @click="handleView(scope.row)"
                v-hasPermi="['system:role:remove']"
                >查看明细</el-button
              >
              <el-button
                size="mini"
                type="text"
                @click="handleUpload(scope.row)"
                v-if="scope.row.state === '3'"
              >
                {{ scope.row.isUpload ? "查看支付凭证" : "上传支付凭证" }}
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <el-dialog :title="dialogTitle" :visible="dialogVisible" @close="dialogVisible = false">
        <div style="margin-bottom: 20px">上传支付凭证</div>
        <el-upload
          name="files"
          ref="upload"
          action="https://jsonplaceholder.typicode.com/posts/"
          :on-change="handleImageChange"
          :auto-upload="false"
          :file-list="currentData.fileList"
          list-type="picture-card"
          multiple
          :disabled="currentData.isUpload"
        >
          <i slot="default" class="el-icon-plus avatar-uploader-icon"></i>
          <div slot="file" slot-scope="{ file }">
            <img
              class="el-upload-list__item-thumbnail"
              :src="file.url"
              alt=""
            />
            <span class="el-upload-list__item-actions">
              <span
                class="el-upload-list__item-preview"
                @click="handlePictureCardPreview(file)"
              >
                <i class="el-icon-zoom-in"></i>
              </span>
              <!-- <span
                class="el-upload-list__item-delete"
                @click="handleRemove(file)"
                v-if="!isView"
              >
                <i class="el-icon-delete"></i>
              </span> -->
            </span>
          </div>
          <div class="el-upload__tip" slot="tip">
            只能上传jpg/png/pdf文件，且不超过10M
          </div>
        </el-upload>

        <el-dialog :visible.sync="imgDialog" :modal-append-to-body="false">
          <img width="100%" :src="dialogImageUrl" alt="" />
        </el-dialog>
        <div class="update-btn" v-if="!currentData.isUpload">
          <el-button type="primary" size="small" @click="uploadConfirm">
            确定
          </el-button>
          <el-button type="warning" size="small" @click="dialogVisible = false">
            取消
          </el-button>
        </div>
      </el-dialog>

      <pagination
        class="text-center bgfff pd10 flex-shrink-0"
        v-show="total > 0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />
    </div>
    <Detail v-if="open" @cancel="cancelFun"></Detail>
  </div>
</template>

<script>
import { dictFilter } from "@/utils/filters/common";
import Detail from "@/views/accountStatement/supplier/detail.vue";
import { utils } from "@/utils/utils";
export default {
  name: "Supplier",
  components: {
    Detail,
  },
  filters: { dictFilter },
  data() {
    return {
      dialogVisible: false,
      dialogTitle: "上传支付凭证",
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      currentData: {
        fileList: [],
      },
      // 角色表格数据
      supplierList: [
        {
          id: 1, //id
          statementDate: "2022-04-19", //出账日期
          number: "DZ000001", //对账单编号
          supplierName: "深圳一飞冲天有限公司", //供应商名称
          billingCycle: "2022-04-01~2022-04-07", //账单周期
          billAmount: "7,800,00.00", //账单金额（元）
          state: "1", //状态
        },
        {
          id: 2, //id
          statementDate: "2022-04-14", //出账日期
          number: "DZ000002", //对账单编号
          supplierName: "深圳一飞冲天有限公司", //供应商名称
          billingCycle: "2022-04-01~2022-04-07", //账单周期
          billAmount: "5,800,00.00", //账单金额（元）
          state: "2", //状态
        },
        {
          id: 3, //id
          statementDate: "2022-04-21", //出账日期
          number: "DZ000003", //对账单编号
          supplierName: "深圳一飞冲天有限公司", //供应商名称
          billingCycle: "2022-04-01~2022-04-07", //账单周期
          billAmount: "6,800,00.00", //账单金额（元）
          state: "3", //状态
          isUpload: false,
        },
        {
          id: 4, //id
          statementDate: "2022-04-21", //出账日期
          number: "DZ000004", //对账单编号
          supplierName: "深圳一飞冲天有限公司", //供应商名称
          billingCycle: "2022-04-01~2022-04-07", //账单周期
          billAmount: "6,800,00.00", //账单金额（元）
          state: "3", //状态
          isUpload: true,
          fileList: [
            {
              url: "https://wjc-bucket.oss-cn-beijing.aliyuncs.com/files/61005729a1534b5893e1a54b83e002cfaa.jpg",
            },
          ],
        },
      ],
      headerName: [
        "出账日期",
        "对账单编号",
        "供应商名称",
        "账单周期",
        "账单金额（元）",
        "状态",
      ],
      headerList: [
        "statementDate",
        "number",
        "supplierName",
        "billingCycle",
        "billAmount",
        "state",
      ],
      statusList: [
        {
          dictValue: "1",
          dictLabel: "平台待确认",
        },
        {
          dictValue: "2",
          dictLabel: "供应商待确认",
        },
        {
          dictValue: "3",
          dictLabel: "供应商已确认",
        },
      ],
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        supplierName: undefined,
        documentDate: undefined,
        state: undefined,
      },
      dialogImageUrl:'',
      imgDialog:false
    };
  },
  created() {
    this.getList();
  },
  methods: {
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.imgDialog = true;
    },
    handleImageChange(file,fileList) {
       this.currentData.fileList = fileList;
      this.currentData.productSrc = file.url;
      this.currentData.productSrcArr = [file.url];
    },
    uploadConfirm() {
      this.currentData.isUpload = true;
      this.dialogVisible = false;
    },
    handleUpload(row) {
      this.currentData = row;
      if (row.isUpload) {
        this.dialogTitle = "查看支付凭证";
      } else {
        this.dialogTitle = "上传支付凭证";
      }
      this.dialogVisible = true;
    },
    cancelFun(val) {
      this.open = val;
    },
    handleExport() {
      utils.exportExcel(
        this.headerName,
        this.headerList,
        this.supplierList,
        "供应商对账单"
      );
    },
    handleSure(row) {
      this.$confirm(
        "本期账单金额为“780,000.00元”，操作确认后，账单将同步至供应商端进行确认。"
      )
        .then((_) => {
          row.state = 3;
          this.$modal.msgSuccess("操作成功");
        })
        .catch((_) => {});
    },
    operationFun(v) {
      this.$modal.msgSuccess("操作成功");
    },
    getList() {
      this.loading = false;
      this.total = 10;
    },
    reset() {
      if (this.$refs.menu != undefined) {
        this.$refs.menu.setCheckedKeys([]);
      }
      this.form = {
        roleId: undefined,
        roleName: undefined,
        roleKey: undefined,
        roleSort: 0,
        status: "0",
        menuIds: [],
        deptIds: [],
        menuCheckStrictly: true,
        deptCheckStrictly: true,
        remark: undefined,
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map((item) => item.id);
      this.single = selection.length != 1;
      this.multiple = !selection.length;
    },

    handleView(row) {
      this.open = true;
    },
  },
};
</script>
<style scope  lang="scss" >
.app-container {
  .update-btn {
    padding-top: 20px;
    display: flex;
    justify-content: center;
  }
}
</style>